import React, { Component } from "react";

class Child extends Component {
  render() {
    return <div>{this.props.text}</div>;
  }
}
export default class App extends Component {
  state = {
    value: "",
  };
  handleChange(evt) {
    this.setState({ value: evt.target.value });
  }
  render() {
    return (
      <div>
        <input
          type="text"
          value={this.state.value}
          onChange={(evt) => this.handleChange(evt)}
        />
        <button onClick={() => console.log(this.state.value)}>取值！</button>
        <Child text={this.myInput?.current?.value} />
      </div>
    );
  }
}

// export default class App extends Component {
//   myInput = React.createRef();
//   render() {
//     return (
//       <div>
//         <input type="text" ref={this.myInput} />
//         <button onClick={() => console.log(this.myInput.current.value)}>
//           取值！
//         </button>
//         <Child text={this.myInput?.current?.value} />
//       </div>
//     );
//   }
// }
